<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>图书信息</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/dashboard/">



    <!-- Bootstrap core CSS -->
    <link th:href="@{/assets/dist/css/bootstrap.min.css}" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #wrap {
            overflow: hidden;
            position: relative;
            width: 1000px;
            height: 580px;
            margin: 100px auto;
        }

        #wrap .img-list {
            display: flex;
            position: relative;
            left: 0px;
            width: 100%;
            height: 100%;
            transition: 0.5s ease;
        }

        #wrap .img-list img {
            width: 100%;
            cursor: pointer;
        }

        #wrap a {
            position: absolute;
            /* top: 50%; */
            transform: translate(0, -50%);
            display: block;
            width: 40px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            user-select: none;
            font-size: 25px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;

        }

        #wrap a.left {
            top: 50%;
            left: 0;
            border-radius: 0 20px 20px 0;
        }

        #wrap a.right {
            top: 50%;
            right: 0;
            border-radius: 20px 0 0 20px;
        }

        .circle-list {
            display: flex;
            position: absolute;
            bottom: 5px;
            left: 53%;
            transform: translate(-50%, 0);
            width: 240px;
            height: 40px;
            z-index: 8;
        }

        .circle-list>.circle {
            margin: 0 5px;
            width: 20px;
            height: 20px;
            background-color: #ecf0f1;
            border-radius: 50%;
        }

        .circle-list>.circle.active {
            background-color: #e74c3c;
        }
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
        .a1{
            position: relative;
        }
        .a1 input{
            position: absolute;
            top: 400px;
            left: 10px;
        }
    </style>


    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>
<body>
<header th:replace="layout/layout::dh"></header>
<!--<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">-->
<!--    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">图书管理系统</a>-->
<!--    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">-->
<!--        <span class="navbar-toggler-icon"></span>-->
<!--    </button>-->
<!--    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" >-->
<!--    <div class="navbar-nav">-->
<!--        <div class="nav-item text-nowrap">-->
<!--            <a class="nav-link px-3" href="#">Sign out</a>-->
<!--        </div>-->
<!--    </div>-->
<!--</header>-->

<div class="container-fluid">
    <div class="row">
        <nav th:replace="layout/layout::nav"></nav>
<!--        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">-->
<!--            <div class="position-sticky pt-3">-->
<!--                <ul class="nav flex-column">-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link active" aria-current="page" th:href="@{/books}">-->
<!--                            <span data-feather="home"></span>-->
<!--                            图书信息-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" th:href="@{/entry}">-->
<!--                            <span data-feather="file"></span>-->
<!--                            书籍录入-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" th:href="@{/borrow}">-->
<!--                            <span data-feather="shopping-cart"></span>-->
<!--                            借阅信息-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" th:href="@{/management}">-->
<!--                            <span data-feather="users"></span>-->
<!--                            用户管理-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" th:href="@{/user}">-->
<!--                            <span data-feather="bar-chart-2"></span>-->
<!--                            个人信息-->
<!--                        </a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div class="a1">-->
<!--                <a th:href="@{/logout}"><input type="submit" class="btn btn-primary btn-block" value="登出"></input></a>-->
<!--            </div>-->

<!--        </nav>-->

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">图书信息</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary">添加</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">修改</button>
                    </div>
                    <input type="datetime-local">
                </div>
            </div>

<!--            <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>-->
            <div >
                <div id="wrap">
                    <!-- 图片列表 -->
                    <div class="img-list">
                        <img src="/img/lib1.jpg" />
                        <img src="/img/lib2.jpg" />
                        <img src="/img/lib3.jpg" />
                        <img src="/img/lib4.jpg" />
                        <img src="/img/lib5.jpg" />
                    </div>

                    <!-- 小箭头 -->
                    <div class="arrow">
                        <a href="javascript:;" class="left">&lt;
                        </a>
                        <a href="javascript:;" class="right">></a>
                    </div>

                    <!-- 小圆点 -->
                    <ul class="circle-list">
                        <li class="circle active" data-n="0"></li>
                        <li class="circle" data-n="1"></li>
                        <li class="circle" data-n="2"></li>
                        <li class="circle" data-n="3"></li>
                        <li class="circle" data-n="4"></li>
                    </ul>
                </div>
                <script>
                    // 获取左右按钮和图片列表
                    let oLeft = document.querySelector(".left");
                    let oRight = document.querySelector(".right");
                    let oImgList = document.querySelector(".img-list");

                    // 克隆第一张图片
                    let clonefirstImg = oImgList.firstElementChild.cloneNode();
                    // 将第一张图片添加至图片列表的末尾
                    oImgList.appendChild(clonefirstImg);

                    // 图片索引 代表当前是第几张图片  index:0代表第一张图片
                    let index = 0;

                    // 设置函数节流锁
                    let lock = true;
                    function handleRightBtn() {
                        if (!lock) return;
                        index++;
                        oImgList.style.left = index * -1000 + "px";
                        // 为什么要加过渡? 因为切换到了最后一张假图时会将过渡去掉
                        oImgList.style.transition = "0.5s ease";

                        if (index === 5) {
                            index = 0;
                            setTimeout(() => {
                                oImgList.style.left = 0;
                                // 取消过渡 500毫秒之后切换第一张
                                oImgList.style.transition = "none";
                            }, 500);
                        }

                        // 设置小圆点的高亮
                        setCircles();
                        // 关锁
                        lock = false;
                        setTimeout(() => {
                            lock = true;
                        }, 500);
                    }

                    // 右按钮的实现
                    oRight.addEventListener("click", handleRightBtn);

                    // 左按钮的实现  瞬间切换到假图然后拉到真实最后一张图片
                    oLeft.addEventListener("click", () => {
                        if (!lock) return;
                        index--;
                        if (index === -1) {
                            oImgList.style.left = 5 * -1000 + "px";
                            oImgList.style.transition = "none";
                            index = 4;
                            setTimeout(() => {
                                oImgList.style.left = index * -1000 + "px";
                                oImgList.style.transition = "0.5s ease";
                            }, 0);
                        } else {
                            oImgList.style.left = index * -1000 + "px";
                        }

                        // 设置小圆点的高亮
                        setCircles();

                        lock = false;
                        setTimeout(() => {
                            lock = true;
                        }, 500);
                    });

                    // 获取五个小圆点
                    const circles = document.querySelectorAll(".circle");

                    // 小圆点高亮的显示
                    function setCircles() {
                        for (let i = 0; i < circles.length; i++) {
                            if (i === index) {
                                circles[i].classList.add("active");
                            } else {
                                circles[i].classList.remove("active");
                            }
                        }
                    }

                    // 小圆点点击切换图片 使用事件代理
                    const oCircle = document.querySelector(".circle-list");
                    oCircle.addEventListener("click", (e) => {
                        // 当我点击小圆点的时候
                        if (e.target.nodeName.toLowerCase() === "li") {
                            // 当前元素的data-n对应得值 和index一一对应
                            const n = Number(e.target.getAttribute("data-n"));
                            index = n;
                            setCircles();
                            oImgList.style.transition = "0.5s ease";
                            oImgList.style.left = index * -1000 + "px";
                        }
                    });

                    // 自动轮播
                    let autoplay = setInterval(handleRightBtn, 2000);
                    const oWrap = document.getElementById("wrap");
                    // 移入停止轮播
                    oWrap.addEventListener("mouseenter", () => {
                        clearInterval(autoplay);
                    });
                    // 移出继续轮播
                    oWrap.addEventListener("mouseleave", () => {
                        // 设表先关
                        clearInterval(autoplay);
                        autoplay = setInterval(handleRightBtn, 2000);
                    });
                </script>
            </div>



            <h2>图书信息</h2>
            <div class="table-responsive">
                <table class="table table-striped table-sm ">
                    <thead>
                    <tr>
                        <th scope="col">编号</th>
                        <th scope="col">图书名称</th>
                        <th scope="col">图书类别</th>
                        <th scope="col">作者</th>
                        <th scope="col">借阅情况</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr th:each="aBook:${books}">
                        <td th:text="${aBook.bookId}"></td>
                        <td th:text="${aBook.bookname}"></td>
                        <td th:text="${aBook.bookcategory}"></td>
                        <td th:text="${aBook.author}"></td>
                        <td th:text="${aBook.borrowingsituation}"></td>
                        <td ><a th:href="@{/updateBook(id=${aBook.bookId})}" class="btn btn-info btn-sm">更新</a>
                            <a th:href="@{/deleteBook(id=${aBook.bookId})}" class="btn btn-danger btn-sm" onclick="if (
!(confirm('你确定删除吗'))) return false">删除</a></td>

                    </tr>

                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>


<script th:src="@{/assets/dist/js/bootstrap.bundle.min.js}"></script>

<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script th:src="@{/js/dashboard.js}"></script>
</body>
</html>
